<template>
	<div class="flex-start-center-wrap">
		<div
			v-for="(upkeepItem, upkeepIndex) in itemList || []"
			:key="upkeepIndex"
			style="width: 100px;padding: 2px;cursor: pointer;"
			@click="onSelectUpkeepItem(upkeepItem)"
		>
			<el-tag :type="setType(upkeepItem)" class="width-100-percent">
				<!--{{ upkeepItem.upkeepState }}-->
				<span v-if="checkUpkeepData.some(x => x.id === upkeepItem.id) || upkeepItem.upkeepState === 1" class="el-icon-s-flag item-gap"></span>
				<span>{{ upkeepItem.upkeepItemName }}</span>
			</el-tag>
		</div>
	</div>
</template>
<script>

    export default {
        props: {
            checkUpkeepData: {
                type: Array,
                default() {
                    return [];
                }
            },
            isSignIn: {
                type: Boolean,
                default: false
            },
            itemList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {

            };
        },
        methods: {
            setType(item) {
                let type = '';
                const signIn = this.checkUpkeepData.some(x => x.id === item.id);
                if (item.upkeepState === 0) {
                    type = 'default';
                    // 勾选签到的灰掉
                    if (item.ifExpire) {
                        type = 'warning';
                    } else {
                        type = 'default';
                    }
                } else if (item.upkeepState === 1 || signIn) {
                    // 勾选签到的灰掉
                    if (this.isSignIn) {
                        type = 'info';
                    } else {
                        type = 'success';
                    }
                }
                return type;
            },
            onSelectUpkeepItem(e) {
                // 未勾选签到和保养中的不能选择
                if (!this.isSignIn || e.upkeepState === 1) return;
                const has = this.checkUpkeepData.some(x => x.id === e.id);
                let arr = this.checkUpkeepData.map(x => x);
                if (has) {
                    arr = this.checkUpkeepData.filter(x => x.id !== e.id);
                } else {
                    arr.push(e);
                }
                this.$emit('change', arr);
            }

        }
    };
</script>
<style scoped lang="scss">

</style>
